<template>
    <div class="login-panel">
        <div class="context">
            <div class="info">
                <div>
                    <img src="./../assets/logo.png">
                </div>
                <h2>客户第一 &nbsp;&nbsp; 诚信敬业 &nbsp;&nbsp; 勇于创新</h2>
                @copyright 法马交通
            </div>
            <div class="login">
                <el-form :model="state.form" ref="form" :rules="rules" label-width="0" @submit.native.prevent>
                    <el-form-item label="" prop="account">
                        <el-input v-model="state.form.account" class="input-with-select">
                            <template #prepend>
                                <el-button :icon="User" disabled />
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                        <el-input v-model="state.form.password" type="password" class="input-with-select"
                            @keyup.enter="onLogin">
                            <template #prepend>
                                <el-button :icon="Lock" disabled />
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onLogin">登 录</el-button>
                        <el-button type="primary" @click="onLogin">离线操作</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, reactive } from 'vue';
import { User, Lock } from '@element-plus/icons-vue';
import md5 from 'js-md5';
import { Login } from "#/go/server/Handler.js";

const { proxy } = getCurrentInstance();

const state = reactive({
    form: {
        account: "",
        password: ""
    }
});

const rules = {
    account: [{ required: true, message: '必填', trigger: 'blur' }],
    password: [{ required: true, message: '必填', trigger: 'blur' }],
};

const onLogin = () => {
    proxy.$refs.form.validate(flag => {
        if (!flag) {
            return
        }
        console.log("to login ======> ")
        Login({ account: state.form.account, password: md5(state.form.password) }).then(res => {
            localStorage.setItem('Authorization', res);
            proxy.$router.push('/index');
        }).catch(err => {
            console.log(err)
        })
    });
}
</script>

<style lang="scss">
.login-panel {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background: aliceblue;

    .context {
        margin: 0 auto;
        height: 500px;
        width: 600px;
        border-radius: 10px;
        box-shadow: 0px 0px 15px #888888;

        .info {
            height: 60%;
            background: #4779a9; // #204D77;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            text-align: center;
            color: #fff;

            div {
                height: 70%;
                width: 100%;

                img {
                    margin: 0 auto;
                    margin-top: 50px;
                    width: 160px;
                }
            }

            h2 {
                margin: 10px 0;
            }
        }

        .login {
            height: 40%;

            .el-form {
                width: 300px;
                margin: 0 auto;
                padding: 20px;

                .el-form-item__error {
                    pointer-events: none;
                    line-height: 2 !important;
                    top: 0 !important;
                    right: 5px !important;
                    text-align: right !important;
                }
            }
        }
    }
}
</style>